<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/5.js"></script>
		<title>jQuery插件</title>
		<style>
			tr.one {
				color: #fff;
				background-color: #080;
			}
			
			tr.two {
				background-color: #ffa;
			}
		</style>
		<script type="application/javascript">
			$(document).ready(function() {

				var $inventory = $("#tableId tbody");

				var quantities = $inventory.find('td:nth-child(2)').map(function(index, qty) {
					return $(qty).text();
				}).get();

				var totalPrice = $inventory.find("td:nth-child(3)").map(function(index, qwe) {
					return $(qwe).text();
				}).get();

				var sumQunantites = $.mathUtils.sum(quantities);
				var sumTotalPrice = $.mathUtils.sum(totalPrice);

				$("#sum").find('td:nth-child(2)').text(sumQunantites);
				$("#sum").find("td:nth-child(3)").text(sumTotalPrice);

				var averageQuantities = $.mathUtils.average(quantities);
				var averageTotalPrice = $.mathUtils.average(totalPrice);

				$("#average").find("td:nth-child(2)").text(averageQuantities.toFixed(2));
				$("#average").find("td:nth-child(3)").text(averageTotalPrice.toFixed(2));

				$("table").click(function() {
					$('tr').swapClass('one', 'two');
				})
				
				$('h1').shadow();
			});
		</script>
	</head>

	<body>
		<h1>货物信息表</h1>
		<table id="tableId" border="1px">
			<thead>
				<tr class="one">
					<th>产品</th>
					<th>数量</th>
					<th>价格</th>
				</tr>
			</thead>
			<tfoot>
				<tr class="two" id="sum">
					<td>总量</td>
					<td></td>
					<td></td>
				</tr>
				<tr class="two" id="average">
					<td>平均</td>
					<td></td>
					<td></td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>玉米</td>
					<td>4</td>
					<td>2.50</td>
				</tr>
				<tr>
					<td>大豆</td>
					<td>12</td>
					<td>4.32</td>
				</tr>
				<tr>
					<td>小麦</td>
					<td>14</td>
					<td>7.89</td>
				</tr>
			</tbody>
		</table>
	</body>

</html>